<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../assets/commonAssets/boostrap/css/bootstrap.css" />
		<script src="../assets/commonAssets/jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../assets/manageAssets/css/changepasswd.css" />
		<title>修改密码</title>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="productTop"><i>修改密码</i></div>
			</div>
			<div class="row col-xs-9" style="margin-top: 2%;">
				<form class="form-horizontal col-xs-offset-5" action="/password">
					<input type="hidden" th:value="${session.user.username}" id="username" name="username">
					<div class="form-group">
						<label class="col-xs-3 control-label">原密码：</label>
						<input type="hidden" id="password" name="password" th:value="${session.user.password}">
						<div class="col-xs-3">
							<input type="password" class="form-control" id="password1" name="password1" placeholder="请输入原密码" onkeyup="validate()"><span
							 id="tishi1"></span>
						</div>
					</div>

					<div class="form-group">
						<label class="col-xs-3 control-label">新密码：</label>
						<div class="col-xs-3">
							<input type="password" class="form-control" id="password2" name="password2" placeholder="请输入新密码" onkeyup="validate()">
						</div>
					</div>

					<div class="form-group">
						<label class="col-xs-3 control-label">确认密码：</label>
						<div class="col-xs-3">
							<input type="password" class="form-control" id="password3" name="password3" placeholder="请输入确认新密码" onkeyup="validate2()"><span
							 id="tishi"></span>
						</div>
					</div>
					<div class="col-xs-3 col-xs-offset-2" id="changgepwdBtn">
						<button type="button" id="changgepwd" style="width: 100%;">更 改</button>
					</div>
				</form>


			</div>
		</div>


	</body>
</html>
<script>
	$(function() {
		$('input').on("blur", function() {
				if ($(this).val() == undefined || $(this).val() == "") {
					$(this).attr('placeholder', '输入不能为空');
					$(this).css('border-color', 'red');
					$('#changgepwd').attr('disabled', 'disabled');
					$('#changgepwd').css('background-color', 'gray');
				} else {
					$('#changgepwd').css('background-color', '#385735');
					$("#changgepwd").removeAttr('disabled');
				}
			})
			.on('focus', function() {
				$(this).css('border-color', '');
			});

		$("#changgepwd").on("click",function(){
			var username = $("#username").val();
			var password = $("#password3").val();
			$.post("/changePassword",{username:username,password:password},function (result) {
				console.log(result);

				if(result.flag == "success"){
					window.close();
					window.location.href=result.url;
					alert("密码修改成功");

				}else{
					alert("密码修改失败");
				}
			})
		});
	});


	function validate() {

		var pwd1 = $("#password").val();
		var pwd2 = $("#password1").val();
		var pwd3 = $("#password2").val();
		var pwd4 = $("#password3").val();
		<!-- 对比两次输入的密码 -->
		if (pwd1 == pwd2) {
			$("#tishi1").html("密码正确");
			$("#tishi1").css("color", "green");
			$("#xiugai").removeAttr("disabled");
		} else {
			$("#tishi1").html("密码错误");
			$("#tishi1").css("color", "red")
			$("button").attr("disabled", "disabled");
		}
	}

	function validate2() {

		var pwd3 = $("#password2").val();
		var pwd4 = $("#password3").val();
		<!-- 对比两次输入的密码 -->

		if (pwd3 == pwd4) {
			$("#tishi").html("两次密码相同");
			$("#tishi").css("color", "green");
			$("#xiugai").removeAttr("disabled");
		} else {
			$("#tishi").html("两次密码不相同");
			$("#tishi").css("color", "red")
			$("button").attr("disabled", "disabled");
		}
	}
</script>
